<header>
    <div class="nav-logo" >
        <img src="@routes.Assets.versioned("images/logo.png")" />

        <div style="display: flex;flex-wrap: wrap;
            align-items: end">
            <h2> Oil-tea Camellia Database <span>|</span> </h2>
            <h4 style="padding-left: 10px">a genome-centered multi-omics database for oil-tea camellia</h4>
        </div>

    </div>

    <nav class="navbar navbar-expand-lg">

        <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav">
                <li class="nav-item" id="back"><a class="nav-link"  >   </a></li>

                <li class="nav-item active" id="index"><a class="nav-link" href="@routes.HomeController.index">  Home</a></li>
                <li class="nav-item my-dropdown" id="browse">
                    <a class="nav-link" href=""> Genomic <i class="fa fa-caret-down"></i> </a>

                    <ul>

                        <li class="my-right">
                            <a href="javascript:void(0)">Genome <i class="fa fa-caret-right"></i></a>
                            <ul>
                                <li><a href="@routes.GenomeController.genomePage("Coleifera")"> <i>Camellia chekiangoleosa</i> </a></li>
                                <li><a href="@routes.GenomeController.genomePage("Camellia_lanceoleosa")"> <i>Camellia lanceoleosa </i></a></li>
                                <li><a href="@routes.GenomeController.genomePage("CON")"> <i>Camellia oleifera </i>Abel. var. “Nanyongensis”</a></li>
                            </ul>
                        </li>
                        <li class="divider"></li>
                        <li class="my-right">
                            <a href="javascript:void(0)">Jbrowse <i class="fa fa-caret-right"></i></a>
                            <ul>
                                <li><a href="http://210.22.121.250:20795/?data=my_data/COADB/Coleifera/data" target="_blank"> <i>Camellia chekiangoleosa </i></a></li>
                                <li><a href="http://210.22.121.250:20795/?data=my_data/COADB/Camellia_lanceoleosa/data" target="_blank"> <i>Camellia lanceoleosa </i></a></li>
                                <li><a href="http://210.22.121.250:20795/?data=my_data/COADB/CON/data" target="_blank"> <i>Camellia oleifera </i>Abel. var. “Nanyongensis”</a></li>
                            </ul>
                        </li>
                        <li class="divider"></li>
                        <li><a href="@routes.SearchController.searchPage">Gene Search</a></li>
                        <li><a href="@routes.SearchController.seqFetchPage">Sequence Fetch</a></li>
                        <li class="divider"></li>
                        <li><a href="@routes.BlastController.blastPage">BLAST</a></li>
                        <li class="divider"></li>
                        <li><a href="@routes.BlockController.syntenicPage">Synteny</a></li>
                    </ul>
                </li>

                <li class="nav-item" id="phenotype"><a class="nav-link" href="@routes.PhenotypeController.phenotypePage"> Phenome  </a></li>
                <li class="nav-item" id="qtl" style="width: 120px"><a class="nav-link" href="@routes.QtlController.qtlPage"> Markers/QTLs  </a></li>
                <li class="nav-item" id="Maps"><a class="nav-link" href="@routes.HomeController.blankPage("Maps")"> Maps  </a></li>
                <li class="nav-item" id="cultivars"><a class="nav-link" href="@routes.FruitController.fruitPage"> Cultivars  </a></li>
                <li class="nav-item" id="fpkm"><a class="nav-link" href="@routes.FpkmController.fpkmPage"> Expression  </a></li>
                @* <li class="nav-item my-dropdown" id="search">
                <a class="nav-link" href="javascript:void(0);"> Search <i class="fa fa-caret-down"></i></a>
                <ul>
                <li><a href="@routes.SearchController.searchPage">Gene Search</a></li>
                <li><a href="@routes.SearchController.seqFetchPage">Sequence Fetch</a></li>
                </ul>
                </li>*@
                @*
                <li class="nav-item" id="blast"><a class="nav-link" href="@routes.BlastController.blastPage"> BLAST</a></li>
                <li class="nav-item" id="synteny"><a class="nav-link" href="@routes.BlockController.syntenicPage"> Synteny</a></li>
                *@
                <li class="nav-item my-dropdown" id="tools">
                    <a class="nav-link" href="@routes.ToolsController.toolPage">  Tools <i class="fa fa-caret-down"></i></a>
                    <ul>

                        <li><a href="@routes.ToolsController.toolsPage("musclePage")">Muscle</a></li>
                        <li><a href="@routes.ToolsController.toolsPage("genewisePage")">Genewise</a></li>
                        <li><a href="@routes.ToolsController.toolsPage("primerPage")">Primer</a></li>
                        <li><a href="@routes.ToolsController.toolsPage("lastzPage")">Lastz</a></li>
                        <li><a href="@routes.ToolsController.toolsPage("goPage")">GO Enrichment</a></li>
                        <li><a href="@routes.ToolsController.toolsPage("keggPage")">KEGG Enrichment</a></li>
                    </ul>
                </li>


                <li class="nav-item" id="Publications"><a class="nav-link" href="@routes.HomeController.blankPage("Publications")"> Publications  </a></li>
                @*
                <li class="nav-item" id="download"><a class="nav-link" href="@routes.DownloadController.downloadPage"> Download</a></li>*@
                <li class="nav-item" id="About"><a class="nav-link" href="@routes.HomeController.blankPage("About")">  About</a></li>


                <li class="nav-item" style="
                    position: absolute;
                    left: 10px" id="align-justify"><a class="nav-link" >  <i class="fa fa-align-justify"></i> Navigation</a></li>
                <li class="nav-item" style="width: 50px;
                    position: absolute;
                    right: 10px" id="lang"><a class="nav-link" href="@routes.HomeController.changeLanguage">  中</a></li>

            </ul>

        </div>
    </nav>
</header>


<script>

        $(function () {
            $(".nav-item").removeClass("active")
            let host = window.location.href
            let ids = host.split('/')
            let num = 2
            if (ids.length > 6) {
                num = ids.length - 4
            }
            let id = ids[ids.length - num]

            let b = ["search", "blast", "synteny"]

            if (b.indexOf(id) !== -1) {
                id = "browse"
            } else if (id === "blank") {
                id = ids[ids.length - 1]
            }

            $("#" + id).addClass("active")
        })

    $("#align-justify").click(function (){
        let dis = $("#index").css("display")
        if(dis === "none"){
            $(".nav-item").css("display","block")
        }else{
            $(".nav-item").css("display","")
        }

    })




    </script>

